<template>
  <div class="um-total">
    <div class="um-tab">
      <div class="tab-top">
        <div class="top-first">
          <h2>课程管理</h2>
          <h5>大学课程</h5>
        </div>
        <div class="top-two">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>课程管理</el-breadcrumb-item>
            <el-breadcrumb-item>大学课程</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div>
        <el-input
          placeholder="根据课程名搜索"
          prefix-icon="el-icon-search"
          v-model="coursename"
          style="width: 150px; margin-left: 50px"
        >
        </el-input>
        <el-button @click="selectUser">搜索</el-button>
      </div>
      <div class="tab-list">
        <el-table
          ref="multipleTable"
          :data="uncourses"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="ID" width="150">
            <template slot-scope="scope">{{ scope.row.courseid }}</template>
          </el-table-column>
          <el-table-column label="课程名" width="200">
            <template slot-scope="scope"><p v-html="scope.row.coursename"></p></template>
          </el-table-column>
          <el-table-column label="课程描述" width="200">
            <template slot-scope="scope">{{ scope.row.coursedc }}</template>
          </el-table-column>
          <el-table-column label="视频地址" width="200">
            <template slot-scope="scope">{{ scope.row.coursev }}</template>
          </el-table-column>
          <el-table-column label="图片地址" width="200">
            <template slot-scope="scope">{{ scope.row.courseimage }}</template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="danger" @click="delHcourse(scope.row.courseid)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      coursename: '',
      uncourses: [],
      multipleSelection: [],
      username: '',

      total: 1,
      //当前页
      currentPage: 1,
      //每页显示条数
      pageSize: 5,
    }
  },
  created() {
    const that = this
    that.selectUser()
  },
  methods: {
    toggleSelection(rows) {
      const that = this
      if (rows) {
        rows.forEach((row) => {
          that.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        that.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      const that = this
      that.multipleSelection = val
    },
    handleSizeChange(val) {
      const that = this
      console.log(`每页 ${val} 条`)
      that.pageSize = val
      that.selectUser()
    },
    handleCurrentChange(val) {
      const that = this
      console.log(`当前页: ${val}`)
      that.currentPage = val
      that.selectUser()
    },
    //查询所有大学课程
    async selectUser() {
      const that = this
      const { data: res } = await axios.get(
        'http://localhost:81/uncourse/selectUNcoursePage?coursename=' +
          that.coursename +
          '&currentPage=' +
          that.currentPage +
          '&pageSize=' +
          that.pageSize
      )
      console.log('查到所有大学课程', res)
      that.uncourses = res.data
      that.total = res.count
    },
    //删除课程
    delHcourse(courseid) {
      const that = this
      alert('删除' + courseid)
      that
        .$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          axios({
            method: 'GET',
            url:
              'http://localhost:81/uncourse/deleteuncourseById?id=' + courseid,
          }).then((res) => {
            console.log('删除教师', res.data.code)
            if (res.data.code == 200) {
              that.$message.success('删除成功')
              that.selectUser()
            } else {
              that.$message.error('删除失败')
            }
          })
        })
        .catch(() => {
          that.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>

<style lang="less" scoped>
.um-total {
  width: 1610px;
  height: 720px;
  margin-left: 200px;
  padding: 50px;
  .um-tab {
    background-color: #eee;
    width: 1600px;
    height: 800px;
    .tab-top {
      display: flex;
      justify-content: space-between;
      .top-first {
        display: flex;
        margin-left: 50px;
        h5 {
          margin-top: 28px;
          color: #666;
        }
      }
      .top-two {
        margin: 28px 50px 0 0;
      }
    }
    .tab-list {
      width: 1500px;
      margin: auto;
      ::v-deep .infouncourse{
        display: inline;
      }
    }
  }
}
</style>
